
// 页面通用信息
(function(){
    var ie6 = (function () {
        return !!window.XMLHttpRequest;
    }());
    // 检测是否是ie8以上
    var gtie7 = (function () {
        return !!document.querySelector;
    }());
    var supportCanvas = (function () {
        try{  
            document.createElement('canvas').getContext('2d');
        }
        catch(e){
            return false;
        }
        return true;
    })();
    var supportTouch = (function () {
        return 'ontouchstart' in window;
    })();
    window.INFO = {
        ISIE6 : ie6,
        GTIE7 : gtie7,
        CANVAS : supportCanvas,
        TOUCH : supportTouch
    };
})();




// 24小时天气, ℃:\u2103, °:\xB0
(function(){
    var rp0, $hours_c,
        tempList, iconList, tempNameList, hstart,
        vItems, hItems, b;
    if(!window.INFO.ISIE6){
        $('#slider_byhours').hide(0);
        return;
    }
    else{
        $('#slider_byhours').show(0);
    }
    $hours_c = $('#wt_hours_c');
    hstart = $hours_c.data('hstart');
    tempList = $hours_c.data('temp').split(',');
    var iconList = function(i){
            var b = '',
            item = $hours_c.data('icon').split(',');
         
            j = parseInt(hstart) + i;
            if((23 >= j && j >= 18) ||  ((j -24) >= 0 && (j -24) < 6) ||  (j >= 0 && j < 6) ||  (j >= 42 && j <= 47)){
               return  item[i] + "_24qx wnt_l_s_gray "; 
            }else{
                 return item[i] + "_24qx";
             }
    }
    tempNameList = $hours_c.data('tempname').split(',');
    vItems = _getVItem(tempList);
    hItems = _getHItem(hstart);
    _renderVItems(vItems);
    _renderHItems(hItems);
    // _daynight (b);
    window.onload= function(e){
       if($(this).hasClass('slider_byhours_on')){
            $(this).removeClass('slider_byhours_on');
            _hideHours();
        }
        else{
            $(this).addClass('slider_byhours_on');
            _showHours();
        } 
    }
    function _showHours () {
        $('#wt_hours').stop().slideDown(300);
        if(!rp0){
            _renderHoursData();
        }
    }
    function _hideHours () {
        $('#wt_hours').stop().slideUp(300);
    }
    function _renderHoursData () {
        rp0 = Raphael('wt_hours_rp', 1100, 290);
        var curDrawIdx = 0;
        var drawTotal = tempList.length;
        var curPointX, curPointY, toPointX, toPointY;
        var drawItv = setInterval(function () {
            var pathCfg,
                thisLine, thisCircle, tempLine;
            if(curDrawIdx == drawTotal){
                clearInterval(drawItv);
                drawItv = null;
                return;
            }
            // 第一次绘画
            if(!curPointX || !curPointY){
                curPointX = _adapterX(0);
                curPointY = _adapterY(tempList[0]);
                curDrawIdx = 1;
                rp0.circle(curPointX, curPointY, 3).attr({"stroke-width" : 0, fill: "white"}).animate({r: 5, "fill": "#F19B12"}, 1e3);

                _drawIcon(0, tempList[0], iconList(0), tempNameList[0], curPointX, curPointY);
            }
            toPointX = _adapterX(curDrawIdx);
            toPointY = _adapterY(tempList[curDrawIdx]);
            pathCfg = 'M' + curPointX + ',' + curPointY + ' L' + toPointX + ',' + toPointY;

            thisLine = rp0.path(pathCfg).attr({"stroke":"#fff", "stroke-width":3}).animate({"stroke":"#ff8f21", "stroke-width":3}, 1e3);
            thisCircle = rp0.circle(toPointX, toPointY, 3).attr({"stroke-width" : 0, fill: "white"}).animate({r: 5, "fill": "#ff8f21"}, 1e3);
            thisCircle.toFront();
            thisLine.toBack();

            // 绘制图片和文字
            _drawIcon(curDrawIdx, tempList[curDrawIdx], iconList(curDrawIdx), tempNameList[curDrawIdx], toPointX, toPointY);
            // hover显示对齐线
            thisCircle.hover(
                (function (cc) {
                    return function () {
                        var tempLineCfg;
                        tempLineCfg = 'M' + cc.attr('cx') + ',0' + ' L' + cc.attr('cx') + ',500';
                        cc.animate({r: 8, "fill": "#FFF"}, 300);
                        tempLine = rp0.path(tempLineCfg).attr({"stroke":"#F29C11", "stroke-width":1, 'stroke-opacity':0.5});
                        tempLine.toBack();
                    }
                })(thisCircle),
                (function (cc) {
                    return function () {
                        cc.animate({r: 5, "fill": "#F19B12"}, 300);
                        if(tempLine){
                            tempLine.remove();
                            tempLine = null;
                        }
                    }
                })(thisCircle));

            curPointX = toPointX;
            curPointY = toPointY;
            curDrawIdx ++;
        }, 100);
    }
    function _getVItem (tempList) {
        var minTemp = Math.min.apply(Math, tempList);
        var maxTemp = Math.max.apply(Math, tempList);
        var vStart = (Math.floor(minTemp / 5)) * 5;
        vItems = [vStart - 5, vStart, vStart + 5, vStart + 10, vStart + 15, vStart + 20];
        return vItems;
    }
    function _getHItem (hStart) {
        hItems = [];
        for(var i = 0; i < 24; i ++){
            if(hStart + i == 24){
                hStart = -i;
            }
            hItems.push(hStart + i);
        }
        return hItems;
    }

    

    function _renderVItems (vItems) {
        $('.wt_hours_v').each(function (i) {
            $(this).html(vItems[i] + '\xB0');
        });
    }
    function _renderHItems (hItems) {
        $('.wt_hours_h').each(function (i) {
            $(this).html(hItems[i] + ':00');
        });
    }
    
    // 根据时间点序号适配X坐标
    function _adapterX (hItemIdx) {
        var leftStart = 32;
        var XItv = 45;
        return leftStart + (XItv * hItemIdx);
    }
    // 根据温度适配Y坐标
    function _adapterY (vItem) {
        var topStart = 15;
        var YItv = 49;
        var rateY = 49 / 5;
        var res = topStart + ((vItems[vItems.length - 1] - vItem) * rateY);
        return res;
    }
     function _daynight (b){
        var b = "";
         for(var i = 0; i < 24; i ++){
            if(hItems[i] <= 23 && hItems[i] >= 18){
               b = "wnt_l_s_gray"
            }
         }
    }
    function _drawIcon (drawIdx, temp, iconCode, tempName, iconX, iconY, b) {
        var $iconItems;
        iconX += 8;
        if(drawIdx % 2 == 0){
            iconY += 20;
        }
        else{
            iconY -= 50;
        }

        $iconItems = $('<span class="wt_hours_icon_w" title="' + tempName + '" style="display: none;"><span class="wea_l '+iconCode + " wt_hours_icon" + '"></span><span class="wt_hours_icon_txt">' + temp + '\u2103</span></span>')
            .css({
                'left' : iconX + 'px',
                'top' : iconY + 'px'
            })
            .appendTo($hours_c)
            .fadeIn(600);

    }

})();



// 逐月气候-气温  绘制曲线图, 依赖jq
var LineMap = function($) {
    var init = function(opts) {
        this._initConf(opts);
        this._initRPDoms();
        this._initRPStates();
        this._renderMap();
    };
    init.prototype = {
        _initConf : function (opts) {
            this.conf = $.extend({
                wrapId : null,
                rpWth : 500,
                rpHth : 300,
                rpOriginX : 10,
                rpOriginY : 20,
                vYStart : 5,
                hXStart : 5,
                vYItv : 35,
                hXItv : 12,
                vNameSet : true,
                hNameSet : false,
                vNums : 6,
                vElePrefix : 'blk_v',
                hElePrefix : 'blk_h',
                vNamePrefix : '',
                vNameSuffix : '',
                hNamePrefix : '',
                hNameSuffix : '',
                circleRadio : 5,
                circleRadioHover : 8,
                lines : [
                {
                    vData : [],
                    dotColor : '#ff990',
                    lineColor : '#ffffff'
                },
                {
                    vData : [],
                    dotColor : '#ff990',
                    lineColor : '#ffffff'
                }],
                onPoint : function (lineIdx, coords, pointIdx) {
                    // body...
                },
                pointMouseIn : function (lineIdx, coords, pointIdx, vValue) {
                    // body...
                },
                pointMouseOut : function (lineIdx, coords, pointIdx, vValue) {
                    // body...
                }
            }, opts);
        },
        _initRPDoms : function () {
            var c = this.conf;
            this.rpCtx = Raphael(c.wrapId, c.rpWth, c.rpHth);
            this.$eles = {
                $wrap : $('#' + c.wrapId),
                $vScales : $('.' + c.vElePrefix),
                $hScales : $('.' + c.hElePrefix)
            };
        },
        _initRPStates : function () {
            var c = this.conf,
                d = this.$eles,
                vDataList1, vDataList1Len, vDataList2, maxData, minData, vDataPerScale, scaleDataStart, scaleDataEnd,
                vDataPerPx;
            // 如果需要动态生成刻度
            if(c.vNameSet){
                vDataList1 = [];
                vDataList2 = [];
                $(c.lines).each(function (i) {
                    vDataList1 = vDataList1.concat(this.vData);
                });
                vDataList1Len = vDataList1.length;
                // vDataList1: 全部数据
                // vDataList2: 除掉null之外的有效数据, 仅用于比较出最大最小值
                for(var i = 0; i < vDataList1Len; i ++){
                    if(vDataList1[i].toUpperCase() == 'NULL'){
                    }
                    else{
                        vDataList2.push(vDataList1[i])
                    }
                }
                minData = Math.min(Math.min.apply(Math, vDataList2))- 5;
                maxData = Math.max(Math.max.apply(Math, vDataList2));
                vDataPerScale = Math.ceil((maxData - minData) / (c.vNums - 2));
                scaleDataStart = vDataPerScale * Math.floor(minData / vDataPerScale);

                // 动态生成纵向刻度
                d.$vScales.each(function (i) {
                    $(this).html(c.vNamePrefix + (scaleDataStart + i * vDataPerScale).toString() + c.vNameSuffix);
                });
            }

            vDataPerPx = vDataPerScale / c.vYItv;

            this.states = {
                minData : minData,
                maxData : maxData,
                vDataPerScale : vDataPerScale,
                scaleDataStart : scaleDataStart,
                scaleDataEnd : scaleDataEnd,
                vDataPerPx : vDataPerPx,
                curCircleX : null,
                curCircleY : null
            };
        },
        // 将数据转为画布坐标
        _getRPCoord : function (dataV, xIdx) {
            var c = this.conf,
                s = this.states,
                res = {};
            res.x = c.hXStart + xIdx * c.hXItv;
            res.y = c.vYStart - (dataV - s.scaleDataStart) / s.vDataPerPx;
            return res;
        },
        // 将数据转为画布坐标, dataV: 纵向数据(非坐标), xIdx: 横向索引
        _drawACircle : function (lineIdx, dataV, xIdx, strokeColor) {
            var that = this,
                c = this.conf,
                s = this.states,
                rp = this.rpCtx,
                cCRadio = c.circleRadio,
                cCRadioHv = c.circleRadioHover,
                coords, coordsX, coordsY,
                rpCircle;
            coords = this._getRPCoord(dataV, xIdx);
            coordsX = coords.x;
            coordsY = coords.y;
            rpCircle = rp.circle(coordsX, coordsY, 3)
                .attr({"stroke-width" : 0, fill: "#FFF"})
                .animate({r: cCRadio, "fill": strokeColor}, 1e3)
                .hover(function () {
                    rpCircle.animate({r: cCRadioHv, "fill": "#c9e4ff"}, 300);
                    c.pointMouseIn && c.pointMouseIn.call(that, lineIdx, coords, xIdx, dataV);
                }, function () {
                    rpCircle.animate({r: cCRadio, "fill": strokeColor}, 300);
                    c.pointMouseOut && c.pointMouseOut.call(that, lineIdx, coords, xIdx, dataV);
                })
            // 坐标存下来是为了画线
            s.curCircleX = coordsX;
            s.curCircleY = coordsY;
        },
        _drawLineTo : function (dataV, xIdx, lineColor) {
            var c = this.conf,
                s = this.states,
                coords = this._getRPCoord(dataV, xIdx);
            this._drawLine(s.curCircleX, s.curCircleY, coords.x, coords.y, lineColor);
        },
        _drawLine : function (fromX, fromY, toX, toY, lineColor) {
            var pathCfg = 'M' + fromX + ',' + fromY + ' L' + toX + ',' + toY;
            thisLine = this.rpCtx.path(pathCfg)
                .attr({"stroke":"#fff", "stroke-width":3})
                .animate({"stroke": lineColor, "stroke-width":3}, 1e3)
                .toBack();
        },
        _renderMap : function () {
            var that = this,
                c = this.conf,
                s = this.states,
                lines = c.lines,
                linesLen = lines.length,
                dotColor, lineColor, lineVData, vDataLen,
                drawItv, drawCnt = 0;
            for(var i = 0; i < linesLen; i ++){
                dotColor = lines[i].dotColor;
                lineColor = lines[i].lineColor;
                lineVData = lines[i].vData;
                vDataLen = lineVData.length;
                for(var j = 0; j < vDataLen; j ++){
                    if(lineVData[j].toUpperCase() == 'NULL'){
                        continue;
                    }
                    (function(i, j, lineVData, vDataLen, dotColor, lineColor){
                        setTimeout(function () {
                            if(j > 0){
                                that._drawLineTo(lineVData[j], j, lineColor);
                            }
                            that._drawACircle(i, lineVData[j], j, dotColor);
                            c.onPoint && c.onPoint.call(that, i, that._getRPCoord(lineVData[j], j), j);
                        }, drawCnt * 100);
                        drawCnt ++;
                    })(i, j, lineVData, vDataLen, dotColor, lineColor);
                }
            }

        }
    };
    return init;
}(jQuery);





// 逐月气候-气温
(function(){
    var blk6Ria, blk6RPInited;
    var $wt_switch_w1;
    var $blk6_c0_0, $blk6_c0_1;
    var blk6Offset;
    var blk6LineMap;
    $wt_switch_w1 = $('#wt_switch_w1');
    $blk6_c0_0 = $('#blk6_c0_0');
    $blk6_c0_1 = $('#blk6_c0_1');
    // 根本浏览器能力决定是否显示高版本效果
    if(!window.INFO.ISIE6){
        $blk6_c0_0.show(0);
        $blk6_c0_1.hide(0);
        blk6Ria = false;
    }
    else{
        $wt_switch_w1.addClass('wt_switch_nofunc')
        $blk6_c0_0.hide(0);
        $blk6_c0_1.show(0);
        blk6Ria = true;
        blk6Offset = $blk6_c0_1.offset();
        // 页面滚动到合适的位置再开始渲染, 假设现在开始页面不会出现顶部动画导致挪位
        /*$(window).add($(document.body)).on('scroll.monthTemp', function () {
            var wScrollTop, wViewHth;
            if(blk6LineMap){
                $(window).add($(document.body)).off('scroll.monthTemp');
                return;
            }
            wScrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
            wViewHth = Math.max(document.documentElement.clientHeight, $(window).height());
            if(wScrollTop + wViewHth > blk6Offset.top){
                _initBlk6RP();
            }
        });*/
    }
    // 选项卡
    $wt_switch_w1.show(0)
        .on('click', '.wt_switch', function () {
            var thisIdx;
            if($(this).hasClass('wt_switch_on')){
                return;
            }
            // 调整过, 气温和降水量序号是反的, so需要更新这句
            thisIdx = $(this).index() == 0 ? '1' : '0';
            $(this).parent()
                .find('.wt_switch')
                .removeClass('wt_switch_on');
            $(this).addClass('wt_switch_on');
            $('#blk6_c0').add('#blk6_c1').hide(0);
            $('#blk6_c' + thisIdx).fadeIn(300);

            // 如果是气温, 则初始化svg
            if(thisIdx == '0'){
                _initBlk6RP();
            }

            // 如果是高版本浏览器且为初始化
            // if(blk6Ria && $(this).index() == 0 && !blk6LineMap){
            // }
        });
    function _initBlk6RP () {
        var blk6_day_temp, blk6_night_temp;
        if(blk6RPInited){
            return;
        }
        blk6_day_temp = $blk6_c0_1.data('daymthtemp').split(',');
        blk6_night_temp = $blk6_c0_1.data('nightmthtemp').split(',');
        // 无数据时可能为[""], length为1, 所以必须检测length是否大于1
        if(blk6_day_temp.length > 1 || blk6_night_temp.length > 1){
            blk6LineMap = new LineMap({
                wrapId : 'blk6_c0_1_rp',
                rpWth : 800, // 画布宽度
                rpHth : 210, // 画布高度
                rpOriginX : 57,  // 画布原点相对于绝对定位原点的偏移x
                rpOriginY : 5,  // 画布原点相对于绝对定位原点的偏移y
                vYStart : 165,  // 纵向刻度起始高度(px),从上往下量
                hXStart : 35,  // 横向刻度起始长度(px)
                vYItv : 40,  // 纵向刻度像素间隔
                hXItv : 66,  // 横向向刻度像素间隔
                vElePrefix : 'blk6_c0_1_v',
                hElePrefix : 'blk6_c0_1_h',
                vNameSet : true, // 纵向刻度项是否自动生成
                hNameSet : false, // 横向向刻度项是否自动生成
                vNums : 5, // 纵向刻度项总数
                vNamePrefix : '', // 纵向刻度项自动生成前缀
                vNameSuffix : '\u2103', // 纵向刻度项自动生成后缀
                circleRadio : 5, // 点半径
                circleRadioHover : 6, // 鼠标移上的点半径
                lines : [ // 曲线数组
                {
                    vData : blk6_day_temp,
                    dotColor : '#ff8f21',
                    lineColor : '#ff8f21'
                },
                {
                    vData : blk6_night_temp,
                    dotColor : '#66d53f',
                    lineColor : '#66d53f'
                }],
                // 每画一个点的回调函数, 参数: 该点的坐标
                onPoint : function (lineIdx, coords, pointIdx, vValue) {
                },
                // 每一个点的鼠标移入
                pointMouseIn : function (lineIdx, coords, pointIdx, vValue) {  
                    var curTempTop;
                    var $curTemp = $('.blk_c0_1_temp' + lineIdx + '_' + pointIdx);
                    var valHtml;
                    if(!$curTemp.length){
                        if(lineIdx == 0){
                            curTempTop = coords.y - 30;
                            valHtml = '\u6700\u9AD8: ' + vValue;
                        }
                        else{
                            curTempTop = coords.y + 17;
                            valHtml = '\u6700\u4F4E: ' + vValue;
                        }
                        $curTemp = $('<span class="blk_c0_1_temp blk_c0_1_temp' + lineIdx + '_' + pointIdx + '" style="display: none; top: ' + curTempTop + 'px;">' + valHtml + '\u2103</span>')
                            .appendTo($blk6_c0_1);
                    }
                    $curTemp.show(0);
                },
                // 每一个点的鼠标移出
                pointMouseOut : function (lineIdx, coords, pointIdx, vValue) {
                    var $curTemp = $('.blk_c0_1_temp' + lineIdx + '_' + pointIdx);
                    $curTemp.hide(0);
                }
            });
        }
        blk6RPInited = true;
    }
})();



